<template>
    <div class="edit-table">
        <div class="table">
            <div v-for="(item, index) in tableData" :key="index" class="row" @click="click(index)" :class="{ selected: index === clickRow}">
                <div @dblclick="dblclick(index,1)" class="key">
                    <el-input
                        v-if="index === dblclickRow && dblclickCol === 1"
                        v-model="value"
                        v-focus
                        @blur="inputChange"
                        @change="inputChange"
                    ></el-input>
                    <div v-else>{{item.key}}</div>
                </div>
                <div @dblclick="dblclick(index,2)" class="value">
                    <el-input
                        v-if="index === dblclickRow && dblclickCol === 2"
                        v-model="value"
                        v-focus
                        @blur="inputChange"
                        @change="inputChange"
                    ></el-input>
                    <div v-else>{{item.value}}</div>
                </div>
            </div>
        </div>
        <div class="buttons">
            <el-button type="primary" @click="addRow">添加行</el-button>
            <el-button type="primary" @click="Delete">删除行</el-button>
        </div>
    </div>
</template>

<script>
export default {
    directives: {
        focus: {
            // 指令的定义
            inserted(el) {
                // 聚焦元素
                el.querySelector('input').focus()
            },
        },
    },
    data() {
        return{
            dblclickRow:-1,
            dblclickCol:-1,
            clickRow:-1,
            value:'',
            edit:false,
            deleteRow:-1
        }
    },
    computed: {
        tableData() {
            return this.$store.state.curComponent.propValue.data
        },
    },
    methods: {
        dblclick(row,col){
            this.dblclickRow = row;
            this.dblclickCol = col;
            if (this.dblclickCol === 1){
                this.value = this.tableData[this.dblclickRow].key;
            }
            if (this.dblclickCol === 2){
                this.value = this.tableData[this.dblclickRow].value;
            }
        },
        click(row){
            this.clickRow = row;
            this.edit = true;
            this.deleteRow = row
        },
        inputChange(){
            if (this.dblclickCol === 1){
                this.tableData[this.dblclickRow].key = this.value;
                this.dblclickRow = -1;
                this.dblclickCol = -1;
            }
            if (this.dblclickCol === 2){
                this.tableData[this.dblclickRow].value = this.value;
                this.dblclickRow = -1;
                this.dblclickCol = -1;
            }
        },
        addRow(){
            let obj = {
                key:"",
                value:""
            }
            this.tableData.push(obj);
            this.$store.state.curComponent.style.height = this.tableData.length*18
        },
        Delete() {
            if (!this.edit) {
                this.$message.error('请先选择要删除的行')
            }else {
                this.tableData.splice(this.deleteRow, 1)
                this.clickRow = -1;
                this.edit = false;
                this.$store.state.curComponent.style.height = this.tableData.length*18
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.edit-table{
    .table{
        .row{
            display: flex;
            flex-direction: row;
            height: 2.8rem;
            width: max-content;
            div{
                width: 7rem;
                height: 2.8rem;
                line-height: 2.8rem;
                text-align: center;
                border: #575656 1px solid;
                color: #575656;
                .el-input{
                    width: 90%;
                    color: #575656;
                    border: none;
                }
            }
        }
    }
    .buttons{
        margin-top: 1rem;
        margin-bottom: 3rem;
    }
}
.selected {
    background: #ecf5ff;
    color: #409eff;
}
</style>
